<template>
    <div v-if="detail.images" class="page">
        <div class="top">
            <van-icon name="arrow-left" @click="back"/>
            <img :src="detail.images.small">
        </div>
        <div class="detail" >
            <p class="title">{{detail.title}}</p>
            <p class="grey">{{detail.genres | formatTitle}}</p>
            <p class="grey">{{detail.mainland_pubdate}}</p>
            <p class="grey">{{detail.countries[0] +' | '+ detail.durations[0]}}</p>
            <p class="sum" :class="isHide?'hide':''">{{detail.summary}}</p>
            <div class="toggle" >
                <van-icon :name="isHide?'arrow-down':'arrow-up'" @click="toggle"/>
            </div>
        </div>

        <div class="actors">
            <div class="actors-title">
                演职人员
            </div>
            <div class="actor-list" >
                <div class="actor-item" v-for="(item,index) of detail.casts" :key="index">
                    <img :src="item.avatars.small" >
                    <p class="actor-name">{{item.name}}</p>
                </div>
            </div>
        </div>

        <div class="photo">
            <div class="photo-title">
                <span class="photo-title-text">剧照</span>
            </div>
            <div class="photo-scroll">
                <div class="photo-item" v-for="(item,index) of photos" :key="index">
                    <img :src="item.image" >
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data(){
            return {
                detail:{},
                isHide:true
            }
        },
        async mounted(){
            var {id} = this.$route.params;
            console.log(id);
            let res = await this.axios.get(`/movie/subject/${id}`);
            console.log(res);
            this.detail = res.data;
        },
        methods:{
            back(){
                this.$router.back();
            },
            toggle(){
                this.isHide = ! this.isHide;
            }
        },
        filters:{
            formatTitle(arr){
                return arr.join(" | ")
            }
        },
        computed:{
            photos(){
                return this.detail.photos.slice(0,5);
            }
        }
    }
</script>

<style scoped>
.hide{
    height: 35px!important;
    overflow: hidden;
}
.page{
    background-color: #f4f4f4;
}
.top{
    position: relative;
    height: 210px;
    overflow: hidden;
}
    .top img{
        width: 100%;
        position: absolute;
        /* top: 50%; */
    }
    .detail{
        padding: 12px 15px 15px 15px;
        color: #797d82;
        font-size: 13px;
        background: #fff;
    }
    .title{
        font-size: 18px;
        color: #191a1b;
    }
    .grey{
        margin-top: 4px;
    }
    .sum{
        margin-top: 12px;
    }
    .van-icon-arrow-left{
        position: absolute;
        top: 5px;
        left: 5px;
        color: #fff;
        z-index: 1
    }
    .actors{
        padding: 0px 15px 15px 15px;
        margin-top: 10px;
        background: #fff;
    }
    .actors-title{
        font-size: 15px;
        padding: 15px 15px 15px 0;
    }
    .toggle{
        text-align: center;
        display: block;
        height: auto;
        width: 20px;
        margin: auto;
        line-height: normal;
    }
    .actor-list{
        display: grid;
        grid-template-columns: repeat(4,100px);
        gap: 15px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .actor-list::-webkit-scrollbar { display: none }
    .actor-item img{
        width: 100px;
    }
    .actor-name{
        font-size: 13px;
    }
    .photo{
        margin-top: 10px;
        background: #fff;
    }
    .photo-title{
        height: 62px;
        width: 100%;
        padding: 15px;
        box-sizing: border-box;
    }
    .photo-title-text{
        font-size: 16px;
        text-align: left;
        color: #191a1b;
    }
    .photo-scroll{
        padding-left: 15px;
        display: grid;
        grid-template-columns: repeat(5,200px);
        gap: 10px;
        overflow-x: auto;
        overflow-y: hidden;
    }
    .photo-scroll::-webkit-scrollbar{
        display: none;
    }
    .photo-item img{
        width: 200px;
        height: 100px;
    }

</style>